import { Button} from 'antd';
import React, { useState, useRef } from 'react';
import { useIntl} from 'umi';
import { PageContainer } from '@ant-design/pro-layout';
import ProTable, { ProColumns, ActionType } from '@ant-design/pro-table';
import CreateForm from './components/CreateForm';
import { TableListItem } from './data';
import svnlist from '../funcs/svnlist';
import publishList from '../funcs/publishlist';
import productlistquery from '../funcs/productlist';
import publushAdd from '../funcs/publishadd';
import  DetialForm from "./publishdetail/detial"


const TableList: React.FC<{}> = () => {
  const [createModalVisible, handleCreateModalVisible] = useState<boolean>(false);
  const [detailModalVisible, handleDetailModalVisible] = useState<boolean>(false);
  const [stepFormValues, setStepFormValues] = useState({});
  const actionRef = useRef<ActionType>();
  const [temp, settemp] = useState<any>();
  const [publishid, setPublishid] = useState<any>();
  const [productlist, setproductlist] = useState<any>();
  const intl = useIntl();
  const columns: ProColumns<TableListItem>[] = [
    {
      title: "发布时间",
      dataIndex: 'publish_date',
      valueType: 'dateTime',
    },
    {
      title: "操作",
      dataIndex: 'option',
      valueType: 'option',
      render: (_, record) => (
        <>
          <a
            onClick={async() => {
                setPublishid(record.id);
                handleDetailModalVisible(true);
            }}
          >
          发布详情
          </a>
        </>
      ),
    },
  ];

  return (
    <PageContainer>
      <ProTable<TableListItem>
        headerTitle={intl.formatMessage({
          id: 'pages.publish.main',
          defaultMessage: '发布管理',
        })}
        actionRef={actionRef}
        rowKey="key"
        search={false}
        toolBarRender={() => [
          <Button type="primary" key="primary" 
            onClick={async() => {
                settemp(await svnlist({}))
                setproductlist(await productlistquery({}))
                handleCreateModalVisible(true);
            }}
            >
          发布
          </Button>,
        ]}
        request={(params, sorter, filter) => publishList({ ...params, sorter, filter })}
        columns={columns}
      />
      <CreateForm
        onSubmit={async (value) => {
          const success = await publushAdd(value);
          if (success) {
            handleCreateModalVisible(false);
            setStepFormValues({});
            if (actionRef.current) {
              actionRef.current.reload();
            }
          }
        }}
        onCancel={() => {
          handleCreateModalVisible(false);
          setStepFormValues({});
        }}
        createModalVisible={createModalVisible}
        values={stepFormValues}
        items={temp}
        productlist={productlist}
      />
      <DetialForm
        onCancel={() => {
          handleDetailModalVisible(false);
        }}
        detailModalVisible={detailModalVisible}
        publishid={publishid}
      />
    </PageContainer>
  );
};

export default TableList;
